<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>css样式在开发中的应用</title>
		<style >
			/* id选择器*/	
			#tb1{
				align-self: center;
				align-content: center;
				background-color: red;
			}
			/*标签选择器*/
			tr{
				background-color: bisque;
			}		
		</style>
	</head>

	<!--
	css语法：
	语法格式：
	   选择器{
	   	样式名:样式值;
	   }
	  注意：
	   选择器，用于选定该样式作用的目标对象或范围；
	 如果样式值（属性值）中含有空格，则需要将属性值使用""引出；
	 常用的选择器有：
	   id选择器；
	       类选择器；
	      标签选择器；
	   组合（派生）选择器；   
	 选择器的优先级：
	   id》类选择器》标签选择器
	   
	 css根据所在的位置不同，分为以下几类：
	 外部css：写在一个单独的css文件中，然后使用 link标签引入所需要使用该样式的heml文件中；
	 内部css：在需要使用样式的html页面中，使用 style标签引出的样式集合；一般写在head部分；
	 内联css： 在标签的style属性中使用的样式；
	 一般的优先级：内联》内部》外部
	就近原则； 
-->

	<body>
		<p>表格显示</p>
		<table id="tb1" width="600px" border="1px" cellspacing="0px" cellpadding="0px">
			<tbody>
				<tr  bgcolor="#CCCCCC">
					<!-- 就近原则（范围最小优先原则）-->
					<td>属性</td>
					<th>值</th>
					<td colspan="2">描述和DTD</td>
				</tr>
				<tr align="center">
					<!-- 就近原则（范围最小优先原则）-->
					<td rowspan="2">属性1和属性2</td>
					<th>值</th>
					<td>描述</td>
					<td>DTD</td>
				</tr>
				<tr align="center">
					<!-- 就近原则（范围最小优先原则）-->
					<!--<td >属性</td>-->
					<th>值</th>
					<td>描述</td>
					<td>DTD</td>
				</tr>
				<tr align="center">
					<!-- 就近原则（范围最小优先原则）-->
					<td>属性</td>
					<th>值</th>
					<td>描述</td>
					<td>DTD</td>
				</tr>
			</tbody>
		</table>
	</body>

</html>